<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				width: 500px;
				margin: 50px auto 0;
			}
			li{
				outline: 2px solid #000;				
			}
			.table>li{
				float: left;
			}
			.clearfix:after{
				content:"";
				clear: both;
				display: block;
			}
			.table>li>ul>li{
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
			}
			.table>li>.number>li{
				width: 200px;
			}
			.calculate{
				width: 100%;
				height: 30px;
			}
			.calculate p{
				border: 1px solid #000;
			}
			.fl-l{
				float: left;
			}
			.fl-r{
				float: right;
			}
			img{
				width: 70px;
				height: 70px;
				padding-top: 15px;
			}
			input{
				width: 50px;
			}
			.minus{
				-webkit-user-select: none;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul class="table clearfix">
				<li>
					<ul class="goods">
						<li>商品</li>
						<li><img src="img/1.jpg" alt=""></li>
						<li><img src="img/2.jpg" alt=""></li>
						<li><img src="img/3.jpg" alt=""></li>
					</ul>
				</li>
				<li>
					<ul class="price">
						<li>单价</li>
						<li>60</li>
						<li>79.5</li>
						<li>3000</li>
					</ul>
				</li>
				<li>
					<ul class="number">
						<li>数量</li>
						<li>
							<div class="btn">
								<button class="plus">+</button><input type="text" value="0"><button class="minus">-</button>
							</div>
						<li>
							<div class="btn">
								<button class="plus">+</button><input type="text" value="0"><button class="minus">-</button>
							</div>
						</li>
						<li>
							<div class="btn">
								<button class="plus">+</button><input type="text" value="0"><button class="minus">-</button>
							</div>
						</li>
					</ul>
				</li>
				<li>
					<ul class="sum">
						<li>小计</li>
						<li>0</li>
						<li>0</li>
						<li>0</li>
					</ul>
				</li>
			</ul>
			<div class="calculate">
				<p class="fl-l">已选中商品: <span id="sumNum">0</span></p>
				<p class="fl-r">合计费用: <span id="sumPrice">0</span></p>
			</div>
		</div>
		<script type="text/javascript">
			//为了数据的安全,所以模拟后台获取,不能innerHTML中获取以防恶意修改
			let data = [
			{
				id:0,
				price : 60,
				num : 0
			},
			{
				id:1,
				price : 79.5,
				num : 0
			},
			{
				id:0,
				price : 3000,
				num : 0
			},
			]
			let aPlus = document.querySelectorAll(".plus"),
				aMinus = document.querySelectorAll(".minus"),
				aInput = document.querySelectorAll(".btn input"),
				aSum = document.querySelectorAll(".sum li+li"),
				aPrice = document.querySelectorAll(".price li+li"),
				oSumNum = document.querySelector("#sumNum"),
				oSumPri = document.querySelector("#sumPrice"),
				len = aPrice.length;
			
			function change(i){
				aInput[i].value = data[i].num;
				aSum[i].innerHTML = data[i].num*data[i].price;
				oSumNum.innerHTML = (function(){
					let sumNum = 0;
					for(let i=0;i<len;i++){
						sumNum += data[i].num;
					}
					return sumNum+"";	
				})();
				oSumPri.innerHTML = (function(){
					let sumPri = 0;
					for(let i=0;i<len;i++){
						sumPri += data[i].num*data[i].price;
					}
					return sumPri+"";	
				})();
			}
			for(let i=0;i<len;i++){
				aPlus[i].onclick = function(){
					data[i].num ++;
					change(i);
				}
				aMinus[i].onclick = function(){
					data[i].num --;
					change(i);
				}
			}
		</script>
	</body>
</html>
